<template>
  <el-dialog v-model="dialogValue" :title="title" width="350px" :showClose="false" :close-on-click-modal="false" top="0"
    :close-on-click-escpe="false" @close="handleCancel">
    <el-form :model="form" @submit.native.prevent>
      <el-form-item label="账号" prop="account">
        <el-input v-model="form.account" @keyup.enter="handleAccountEnter" ref="accountInputRef" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" type="password" @keyup.enter="handleVerify" :disabled="!canInputPassword"
          ref="passwordInputRef" show-password />
      </el-form-item>
    </el-form>
    <template #footer>
      <slot name="footer">
        <el-button @click="handleCancel"> 取 消</el-button>
        <el-button @click="handleVerify" type="primary"> 确 定</el-button>
      </slot>
    </template>
  </el-dialog>
</template>

<script lang='ts' setup>
// 验密弹框，可根据传入用户id带出用户账号自动回车，验密后存入验密记录
/*
用法： 
import { useVeriftyPwd } from '/@/hooks/useVeriftyPwd';
useVeriftyPwd({ title: '标题', entityId: '单号' }, userId).then(userInfo => {})
*/
import { ElInput, ElButton, ElDialog, ElMessage, ElForm, ElFormItem } from 'element-plus';
import { ref, reactive } from 'vue';
import { SysAuthApi, VerifyPwdOptOutput } from '/@/api/system/sysAuth';
import { getUserAccount } from '/@/stores/baseInfo';

const props = defineProps({
  title: {
    type: String,
    default: '验密'
  },
  entityId: {
    type: String,
    default: ''
  }
})

const dialogValue = ref(false);
const accountInputRef = ref(ElInput);
const passwordInputRef = ref(ElInput);
const canInputPassword = ref(false);

const form = reactive({
  account: '',
  password: ''
});

// 传入的配置项
const config = ref({
  confirmCallback: (info: VerifyPwdOptOutput) => { },
  cancelCallback: () => { },
  destory: () => { }
})

// 处理账号输入框回车事件
const handleAccountEnter = () => {
  if (!form.account) {
    return
  }
  canInputPassword.value = true;
  setTimeout(() => {
    passwordInputRef.value?.focus();
  })
};

// 处理输入账号密码后的回车事件，调用验密接口
const handleVerify = async () => {
  if (!form.account) {
    ElMessage.error({
      showClose: true,
      message: '请输入账号',
    });
    return;
  }
  if (!form.password) {
    ElMessage.error({
      showClose: true,
      message: '请输入密码',
    });
    return;
  }
  SysAuthApi.verifyPwdOpt({
    account: form.account,
    password: form.password,
    leiXing: props.title,
    entityId: props.entityId
  }).then(re => {
    config.value.confirmCallback(re)
    config.value.destory()
    dialogValue.value = false;
  }).catch(err => {
    console.log(err);
  })
};
const handleCancel = () => {
  config.value.cancelCallback()
  config.value.destory()
  dialogValue.value = false
}
/** 外部调用打开弹框初始化方法 */
const open = (userId?: number) => {
  dialogValue.value = true;

  if (userId) {
    const account = getUserAccount(userId);
    if (account) {
      form.account = account;
      handleAccountEnter();
    } else {
      setTimeout(() => {
        accountInputRef.value?.focus();
      });
    }
  } else {
    setTimeout(() => {
      accountInputRef.value?.focus();
    });
  }
};

defineExpose({
  open, config
});
</script>

<style lang='scss' scoped></style>